import QtQuick
import Fk.RoomElement

Item {
  id: root
  anchors.fill: parent
  scale: 0.75
  property string img: "../image/mvp/"
  property string generalName: ""
  property string screenName: ""
  property int rankNum: 0
  property int attack_score: 0
  property int heal_score: 0
  property int help_score: 0
  property int global_score: 0
  property int punish: 0

  Rectangle {
    id: mask
    scale: 1 / 0.75
    anchors.fill: parent
    color: "black"
    opacity: 0.7
  }

  Image {
    id: ribbon_left
    source: img + "ribbon.png"
    y: ribbon.y
    x: ribbon.x - 530
    opacity: 0
  }

  Image {
    id: ribbon
    property int curr: 0
    source: img + "ribbon" + curr + ".png"
    anchors.verticalCenter: parent.verticalCenter
    x: parent.width / 2 - 100
    opacity: 0
  }

  Image {
    id: light
    property int curr: 0
    source: img + "light" + curr + ".png"
    anchors.verticalCenter: parent.verticalCenter
    x: ribbon.x - 400
    scale: 1.5
    opacity: 0
  }

  GeneralCardItem {
    id: herocard
    // source: SkinBank.getGeneralPicture(generalName)
    name: generalName
    // x: light.x + 142
    // y: light.y + 73
    x: light.x + 208
    y: light.y + 185
    rotation: 10.76
    // width: 202
    // height: 272
    // fillMode: Image.PreserveAspectCrop
    // transform: Scale {
    //   xScale: 287 / 93
    //   yScale: 386 / 130
    // }
    scale: 5
    // scale: 1.42 * (272 / 130) //1.42
    // transformOrigin: Item.TopLeft
  }

  Rectangle {
    id: herolight
    color: "white"
    rotation: 10.76
    x: herocard.x
    y: herocard.y
    width: 93
    height: 130
    scale: 3
    opacity: 0
  }

  Image {
    id: mvp
    source: img + "mvp.png"
    y: ribbon.y - 120
    x: ribbon.x + 100
    opacity: 0
  }

  Image {
    id: rank
    source: img + "rank" + rankNum + ".png"
    y: ribbon.y + 20
    x: ribbon.x + 100
    opacity: 0
  }

  Item {
    id: txt_item
    x: rank.x + rank.width
    y: rank.y + 36
    opacity: 0
    Text {
      id: nick_txt
      color: "#E2B873"
      font.family: fontLibian.name
      text: "玩家昵称"
      font.pointSize: 16
      style: Text.Outline
      styleColor: "#4F1809"
    }
    Text {
      id: player
      color: "#E2B873"
      font.family: fontLibian.name
      text: screenName
      anchors.top: nick_txt.bottom
      anchors.topMargin: -8
      font.pointSize: 36
      style: Text.Outline
      styleColor: "#4F1809"
    }
    Text {
      id: total_score
      text: "技术分：" + (attack_score + heal_score + help_score + global_score + punish)
      anchors.top: player.bottom
      font.pointSize: 16
      style: Text.Outline
      styleColor: "#4F1809"
      color: "#E2B873"
      font.family: fontLibian.name
    }
  }

  Text {
    id: detail_score
    opacity: 0
    text: "攻击分数\t" + attack_score +
      "\n治疗分数\t" + heal_score +
      // "\n辅助分数\t" + help_score +
      "\n局势分数\t" + global_score +
      "\n惩罚扣分\t" + punish
    x: rank.x + 40
    y: rank.y + rank.height
    font.pointSize: 16
    color: "#938D69"
    font.family: fontLibian.name
  }

  SequentialAnimation {
    id: anim
    running: false

    PropertyAnimation {
      target: herocard
      property: "scale"
      to: 1.8
      duration: 100
    }

    ScriptAction {
      script: {
        herocard.scale = 3;
        light.opacity = 1;
        herolight.opacity = 0.8;
        light_loop.start();
      }
    }

    ParallelAnimation {
      PropertyAnimation {
        target: herolight
        property: "opacity"
        to: 0
        duration: 150
      }

      PropertyAnimation {
        target: herolight
        property: "scale"
        to: 4
        duration: 150
      }
    }

    PauseAnimation { duration: 250 }

    ScriptAction {
      script: {
        mvp.scale = 1.8;
        mvp.opacity = 0.7;
      }
    }

    PauseAnimation { duration: 33 }

    ScriptAction {
      script: {
        mvp.scale = 0.8;
        mvp.opacity = 0.8;
      }
    }

    PauseAnimation { duration: 67 }

    ScriptAction {
      script: {
        mvp.scale = 1;
        mvp.opacity = 1;
      }
    }

    PauseAnimation { duration: 100 }

    ScriptAction {
      script: {
        ribbon.opacity = 1;
        ribbon_left.opacity = 1;
        detail_score.opacity = 1;
        ribbon_loop.start()
      }
    }

    ParallelAnimation {
      PropertyAnimation {
        target: txt_item
        property: "opacity"
        to: 1
        duration: 200
      }
      PropertyAnimation {
        target: rank
        property: "opacity"
        to: 1
        duration: 200
      }
    }

    PauseAnimation {
      duration: 3200
    }

    onFinished: {
      roomScene.bigAnim.source = "";
    }
  }

  PropertyAnimation {
    id: light_loop
    target: light
    property: "curr"
    from: 0
    to: 7
    duration: 700
    loops: Animation.Infinite
    running: false
  }

  PropertyAnimation {
    id: ribbon_loop
    target: ribbon
    property: "curr"
    from: 0
    to: 7
    duration: 700
    loops: Animation.Infinite
    running: false
  }

  function loadData(data) {
    // let data = JSON.parse(jsonData);
    generalName = data.general;
    screenName = data.screenName;
    rankNum = data.rank;
    attack_score = data.attack_score ?? 0;
    heal_score = data.heal_score ?? 0;
    help_score = data.help_score ?? 0;
    global_score = data.global_score ?? 0;
    punish = data.punish ?? 0;
    anim.running = true;
  }
}
